<template>
  <div class="main">
    <mianbao :title="title"></mianbao>
    <el-row class="container">
      <biaotou
        :options="options"
        @selectType="selectType"
        @selectDate="selectDate"
        @seachys="seachys"
        @amentDate="amentDate"
        @changeVal="changeVal"
        @resetSH="resetSH"
      ></biaotou>
      <el-row class="content">
        <el-table
          ref="multipleTableRef"
          :data="tableDate"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column type="selection" width="55" />

          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width"
            v-for="item in labelData"
          />
          <el-table-column label="挂号科室" min-width="100">
            <template #default="scope">
              <span
                >{{ scope.row.department_one_name }}-{{
                  scope.row.department_two_name
                }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="挂号状态" min-width="100">
            <template #default="scope">
              <el-tag type="" effect="dark" v-if="scope.row.rt_status == 0">
                未就诊
              </el-tag>
              <el-tag
                type="success"
                effect="dark"
                v-if="scope.row.rt_status == 1"
              >
                已就诊
              </el-tag>
              <el-tag
                type="info"
                effect="light"
                v-if="scope.row.rt_status == 2"
              >
                已取消
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="编辑" min-width="90">
            <template #default="scope">
              <el-icon
                :size="24"
                color="#0066ff"
                @click="lookDetails(scope.row)"
                ><List
              /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row class="pages">
        <yema :count="count" @changePage="changePage"></yema>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import mianbao from "coms/wxq/mianbao.vue";
import biaotou from "coms/wxq/yyYema.vue";
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import yema from "../../components/wxq/yema.vue";
import { setReserve, setDesk } from "../../utils/api/reserve_wxq";
import formatDay from "../../utils/formatDay";

export default {
  props: {},
  components: { mianbao, biaotou, yema },
  setup(props, context) {
    let router = useRouter();
    const data = reactive({
      title: "预约挂号",
      count: null,
      options: [],
      labelData: [
        { label: "患者姓名", prop: "patients_name", width: 100 },
        { label: "就诊卡号", prop: "card_numer", width: 120 },
        { label: "身份证号", prop: "patients_id_number", width: 150 },
        { label: "手机号码", prop: "patients_phone", width: 120 },
        { label: "挂号类型", prop: "name", width: 100 },
        { label: "挂号费", prop: "price", width: 100 },
        { label: "就诊日期", prop: "startDate", width: 100 },
        { label: "候诊时间", prop: "startTime", width: 100 },
        { label: "预约时间", prop: "creadteDate", width: 100 },
      ],
      tableDate: [],
      parameter: {
        page: 1,
        search: null,
        radio: null,
        startDate: null,
        endDate: null,
        one_id: null,
        two_id: null,
      },
    });
    const multipleTableRef = ref();
    //页码变化
    const changePage = (page) => {
      data.parameter.page = page;
      setTableDate(data.parameter);
    };
    //表格选择变化
    const handleSelectionChange = (val) => {};
    //编辑查看就诊人信息
    const lookDetails = (val) => {
      let yyhzData = { ...val };

      router.push({
        name: "ghyyDetailsPage",
        params: {
          list: JSON.stringify(yyhzData),
        },
      });
    };
    //选择类型
    const selectType = (radio) => {
      data.parameter.radio = radio;
      setTableDate(data.parameter);
    };
    //选择日期查询
    const amentDate = (val) => {
      if (val == "") {
        data.parameter.startDate = null;
        data.parameter.endDate = null;
      } else {
        data.parameter.startDate = formatDay(val[0]);
        data.parameter.endDate = formatDay(val[1]);
      }

      setTableDate(data.parameter);
    };
    //选择科室查询
    const changeVal = (val) => {
      if (val == "") {
        data.parameter.one_id = null;
        data.parameter.two_id = null;
      } else {
        data.parameter.one_id = val[0];
        data.parameter.two_id = val[1];
      }
      setTableDate(data.parameter);
    };
    //搜索查询
    const seachys = (val) => {
      if (val == "") {
        data.parameter.search = null;
      } else {
        data.parameter.search = val;
      }

      setTableDate(data.parameter);
    };
    //重置搜素
    const resetSH = () => {
      data.parameter.search = null;
      data.parameter.radio = null;
      data.parameter.startDate = null;
      data.parameter.endDate = null;
      data.parameter.one_id = null;
      data.parameter.two_id = null;
      setTableDate(data.parameter);
    };
    //请求科室数据
    const setKsdata = () => {
      setDesk().then((res) => {
        let out = [];
        res.data.data.forEach((item) => {
          if (out.indexOf(item.department_one_id) == -1) {
            let obj = {
              value: "",
              label: "",
              children: [],
            };
            let obj1 = {
              value: "",
              label: "",
            };
            out.push(item.department_one_id);
            obj.value = item.department_one_id;
            obj.label = item.department_one_name;
            obj1.value = item.department_two_id;
            obj1.label = item.department_two_name;
            obj.children.push(obj1);

            data.options.push(obj);
          } else {
            let obj1 = {
              value: "",
              label: "",
            };
            obj1.value = item.department_two_id;
            obj1.label = item.department_two_name;
            data.options[out.indexOf(item.department_one_id)].children.push(
              obj1
            );
          }
        });
      });
    };
    setKsdata();
    //请求table数据
    const setTableDate = (obj) => {
      setReserve(obj).then((val) => {
        data.count = val.data.count;
        data.tableDate = val.data.data;
        data.tableDate.forEach((item) => {
          item.creadteDate = formatDay(item.creadteDate);
          item.startDate = formatDay(item.startDate);
          item.endDate = formatDay(item.endDate);
        });
      });
    };
    setTableDate(data.parameter);
    return {
      ...toRefs(data),
      handleSelectionChange,
      multipleTableRef,
      changePage,
      lookDetails,
      selectType,
      seachys,
      amentDate,
      changeVal,
      resetSH,
    };
  },
};
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
}
.container {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px;
  background-color: #fff;
  border-radius: 8px;
}
.content {
  width: 100%;
  margin-top: 12px;
}
.pages {
  width: 100%;
}
</style>
